<template>
  <div class="file-item">
    <img :src="data.url">
    <div class="add" v-if="data.date">
      <p>补</p>
      <p>{{ data.date }}</p>
    </div>
    <div class="handles">
      <Icon type="ios-eye-outline" :size="22" @click.native="onPreview"></Icon>
      <Icon v-if="showDelete" type="ios-trash-outline" :size="22" @click.native="onRemove"></Icon>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      data: Object,
      showDelete: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    },
    methods: {
      onPreview() {
        this.$emit('preview')
      },
      onRemove() {
        this.$emit('remove')
      },
    },
  }
</script>

<style lang='scss' scoped>
  .file-item {
    width: 100px;
    height: 100px;
    border: 1px solid #dadada;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
    
    > img {
      width: 100%;
      height: 100%;
    }
    
    .add {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      p {
        font-size: 18px;
        color: #d9001b;
      }
    }
    
    &:hover {
      .handles {
        visibility: visible;
      }
    }
  }
  
  .handles {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: space-around;
    align-items: center;
    visibility: hidden;
    
    i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }
  }
</style>